8-2 LPⅴ⑤

本節將介紹鍵盤與滑鼠事件，以及相關範例。
我們可以偵測某一個特定按鍵是否被按下，其步驟如下：

利用 document.onkeydown 來抓到「按鍵事件」，並指定相關的事件處理程式。
在事件處理程式中，可以利用 window.event.keycode 來知道按鍵代碼，並進行相關的處理。
以下是一個具體範例，只要你按下任何一個鍵盤，就會顯示對應的代碼，如下：
Example（keyboardEvent01.htm）：
上述範例的完整原始檔案如下：
原始檔（keyboardEvent01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>
<body>
<h2 align=center>鍵盤事件：基本測試</h2>
<hr>

<script>
function keyFunction() {
	alert("Key code = " + event.keyCode);
	if (event.keyCode==27) {
		alert("Esc 的內建功能已被取消！");
		return false;
	} else if (event.keyCode==8) {
		alert("Backspace 的內建功能已被取消！");
		return false;
	} else if (event.keyCode==9) {
		alert("Tab 的內建功能已被取消！");
		return false;
	} else if (event.keyCode==71) {
		document.location="http://www.google.com";
	}
}
document.onkeydown=keyFunction;
</script>

請按下鍵盤任意鍵，以顯示按鍵代碼！請注意，下列按鍵的內建功能已被取消：
<ul>
<li>Esc
<li>Tab
<li>Backspace
</ul>
此外，"g" 鍵有特殊功能！

<hr>
</body>
</html>
在上述範例中，我們使用 onkeydown 事件來執行 keyFunction() 函數。特別要注意的是，如果事件處理程式回傳給 document.onkeydown 的值為 false，則原先按鍵的預設功能將會被取消。例如，上述範例的 Backspace（回到上一頁）的預設功能就已經被取消了。
Hint
window.event.keycode 可以簡寫成 event.keycode。
有時候我們要定義一些「熱鍵」來執行特殊功能，但是這些熱鍵最好是複合鍵（先按 Shift 或 Ctrl 或 Alt 不放，再按任意鍵），以免蓋掉原有的預設功能，因此我們就要能夠偵測複合鍵常用的 Shift、Ctrl、Alt，可見下列範例：
Example（keyboardEvent02.htm）：
上述範例的完整原始檔案如下：
原始檔（keyboardEvent02.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>鍵盤事件：偵測複合鍵</h2>
<hr>

<script>
// Shift 的鍵盤代碼是 16，Ctrl 的鍵盤代碼是 17，Alt 的鍵盤代碼是 18
function keyFunction() {
	// 若不加第二個條件，會印出兩次警告視窗
	// 一次是按 Shift，第二次是按其他鍵
	if ((event.shiftKey) && (event.keyCode!=16))	
		alert("Shift + "+event.keyCode);
	if ((event.ctrlKey) && (event.keyCode!=17))
		alert("Ctrl + "+event.keyCode);
	if ((event.altKey) && (event.keyCode!=18))
		alert("Alt + "+event.keyCode);
}
document.onkeydown=keyFunction;
</script>
請按下鍵盤任意複合鍵（先按 Shift 或 Ctrl 或 Alt 不放，再按任意鍵），以顯示按鍵代碼！

<hr>
</body>
</html>
由上述範例可知，我們可用 event.shiftKey、event.ctrlKey、event.altKey 的值是否是 true 來確認 Shift（鍵盤代碼是 16）、Ctrl（鍵盤代碼是 17）、Alt（鍵盤代碼是 18）的按鍵是否是在被按下的狀態。類似的性質還有：

event.shiftLeft：左邊的 Shift 鍵是否被按下
event.ctrlLeft：左邊的 Ctrl 鍵是否被按下
event.altLeft：左邊的 Alt 鍵是否被按下

Hint
如何偵測 Windows 鍵和其他鍵所形成的組合鍵？若有讀者知道，請將範例寄給我，謝謝。
以下是一個作弄人的網頁：
Example（keyboardEvent03.htm）：
上述範例的完整原始檔案如下：
原始檔（keyboardEvent03.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>
<body>
<h2 align=center>鍵盤事件：作弄人的網頁</h2>
<hr>

<script>
function encrypt(){
	event.keyCode-=1;
}
function check(){
	if (testField.value=="I am a pig")
		alert("答對了！");
}
</script>
請由鍵盤輸入「J!bn!b!qjh」：
<p>
<input id=testField onKeyPress="encrypt()" onKeyUp="check()">

<hr>
</body>
</html>
在上述範例中，我們使用 input 標籤的 onKeyPress 事件來即時改變使用者的輸入，並用 onKeyUp 事件來檢查使用者是否完成正確輸入。
在以下的網頁中，紅色方塊將隨著你的滑鼠移動：
Example（newCursor01.htm）：
上述範例的完整原始檔案如下：
原始檔（newCursor01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body onmousemove="newCursor()">
<h2 align=center>鍵盤事件：黏住游標的方塊</h2>

<script>
function newCursor() {
	redSquare.style.posLeft=event.clientX-10;
	redSquare.style.posTop=event.clientY-10;
}
</script>
<div id=redSquare style="position:absolute; top:10; left:10; height:20; width:20; background-color:red"></div>

</body>
</html>
在上述原始碼中，我們使用 id=redSquare 來代表紅色方塊，event.clientX 及 event.clientY 分別代表滑鼠相對應於網頁視窗的 X 和 Y 座標。
在以下的網頁中，你可以使用方向鍵（箭頭鍵）來移動網頁中的綠色方塊：
Example（squareMover01.htm）：
上述範例的完整原始檔案如下：
原始檔（squareMover01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body onkeydown="move()">
<h2 align=center>鍵盤事件：使用方向鍵來移動物件</h2>
<hr>

<script>
function move(){
	ek=event.keyCode;
	if (ek==37) myArea.style.posLeft-=5;
	if (ek==39) myArea.style.posLeft+=5;
	if (ek==38) myArea.style.posTop-=5;
	if (ek==40) myArea.style.posTop+=5;
}
</script>
<div id=myArea style="position:absolute; top:20; left:20; height:50; width:50; background-color:#00FF00"></div>
請按鍵盤的方向鍵來移動綠色的方塊。

<hr>
</body>
</html>
另外，利用 event.button，我們可以偵測使用者用來產生滑鼠事件的滑鼠鍵（左鍵或是右鍵），例如：
Example（mouseEvent01.htm）：
在上述範例中，使用不同滑鼠按鍵去點選文字，就會產生不同的警告視窗來顯示所用的滑鼠按鍵。上述範例的完整原始檔案如下：
原始檔（mouseEvent01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>滑鼠事件：偵測滑鼠鍵</h2>
<hr>

<script>
function showMouseButton() {
	switch (event.button){
		case 1:
			alert("你用滑鼠左鍵！");
			break;
		case 2:
			alert("你用滑鼠右鍵！");
			break;
		case 4:
			alert("你用滑鼠中鍵！");
			break;
		default:
			alert("未知的滑鼠鍵！");
			break;
	}
}
</script>
<div onMouseDown="showMouseButton()">請用滑鼠按我！</div>

<hr>
</body>
</html>
在上述範例中，我們使用 event.button 來偵測滑鼠按鍵：

event.button = 1 ===> 滑鼠左鍵被按下
event.button = 2 ===> 滑鼠右鍵被按下
event.button = 4 ===> 滑鼠中鍵被按下
為了防止（或是阻礙）使用者下載圖片或是檢視原始檔，我們可以取消滑鼠右鍵的預設功能，範例如下：
Example（disableRightButton01.htm）：
在上述範例中，我們使用 event.button 來偵測滑鼠鍵，如果是右鍵，則以警告視窗嘲笑使用者，並回傳 false，以取消預設之功能。當然，「道高一尺，魔高一丈」，若你還是執意要抓圖，在上述網頁按下 Ctrl-a，即可看到撇步。（由於篇幅有限，不再列出本範例之程式碼，你可以由範例網頁自行檢視原始碼。）
相關範例：

滑鼠按下後，畫一個圓圈（感謝 9762210 陳培基同學熱心提供！）

JavaScript 程式設計與應用：用於網頁用戶端